<template>
  <div>
    <van-tabs v-model:active="active" animated>
      <van-tab v-for="index in 2" :title="index==1?'登录':'注册'">
        <div v-if="index == 1">
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field
                  v-model="username"
                  name="用户名"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                  v-model="password"
                  type="password"
                  name="密码"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
              />
            </van-cell-group>
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit">
                登录
              </van-button>
            </div>
          </van-form>
        </div>
        <div v-else>
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field
                  v-model="username"
                  name="用户名"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                  v-model="password"
                  type="password"
                  name="密码"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码哦' }]"
              />
            </van-cell-group>
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit">
                注册
              </van-button>
            </div>
          </van-form>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import { createApp } from "vue";
import { Button, Form, Field, CellGroup } from "vant";
const app = createApp();
app.use(Form);
app.use(Field);
app.use(CellGroup);
</script>
